<template>
  <div>
    <div style="display: flex; justify-content: space-between">
      <div style="display: flex; align-items: center; gap: 2px">
        <el-input
          v-model="searchDTO.title"
          clearable
          style="width: 150px; border-radius: 5px"
          placeholder="请输入题目名称"
        />
        <el-button icon="search" @click="getList" type="success"></el-button>
      </div>
      <el-button
        v-if="RoleUtils.verifyRole([1, 3])"
        type="primary"
        icon="plus"
        style="border-radius: 10px"
        @click="add"
        >添加
      </el-button>
    </div>

    <CommonDialogForm
      v-model:has-loading="loading"
      v-model:visible="dialogAdd"
      v-model:form-params="addDTO"
      :rules="ProjectRules.addRules"
      :item-config="ProjectParams.formColumn"
      :title="'添加题目'"
      :width="'30%'"
      :submit-text="'保存'"
      :chancel-text="'取消'"
      :is-submit="true"
      :close-tips="true"
      @submit="onAdd"
    >
    </CommonDialogForm>

    <CommonDialogForm
      v-model:has-loading="loading"
      v-model:visible="dialogUpdate"
      v-model:form-params="updateDTO"
      :rules="ProjectRules.addRules"
      :item-config="ProjectParams.formColumn"
      :title="'修改题目'"
      :width="'20%'"
      :submit-text="'保存'"
      :chancel-text="'取消'"
      :is-submit="true"
      :close-tips="true"
      @submit="onUpdate"
    >
    </CommonDialogForm>

    <el-drawer v-model="dialogApply" title="申请题目" direction="rtl" size="30%">
      <div>
        <div>
          <div>
            <el-descriptions class="margin-top" :column="2" size="default" border>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon>
                      <user />
                    </el-icon>
                    发布教师
                  </div>
                </template>
                {{ projectVO?.teacherName }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon>
                      <user />
                    </el-icon>
                    发布时间
                  </div>
                </template>
                {{ projectVO?.releaseTime }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon>
                      <user />
                    </el-icon>
                    可选人数
                  </div>
                </template>
                {{ projectVO?.maxCapacity }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon>
                      <Discount />
                    </el-icon>
                    当前已选择
                  </div>
                </template>
                {{ projectVO?.currentSelected }}
              </el-descriptions-item>
            </el-descriptions>
          </div>

          <br />
          <br />
          <el-tag>题目名称</el-tag>
          <el-tag type="info" style="margin-left: 20px">{{ projectVO?.title }}</el-tag>
          <br />
          <br />
          <el-tag>题目描述</el-tag>
          <el-tag type="info" style="margin-left: 20px">{{ projectVO?.description }}</el-tag>
          <br />
          <br />
          <el-tag>题目要求</el-tag>
          <el-tag type="info" style="margin-left: 20px">{{ projectVO?.requirements }}</el-tag>
        </div>
        <div style="position: absolute; bottom: 2vh; right: 10px">
          <el-button @click="dialogApply = false">取消</el-button>
          <el-button type="primary" @click="onApply">确认申请</el-button>
        </div>
      </div>
    </el-drawer>

    <CommonPageTable
      :table-column="ProjectParams.tableColumn"
      :table-data="searchVO"
      :table-loading="loading"
      :table-attribute="{
        'empty-text': '暂无数据',
        height: TableEnum.height,
      }"
      :page-params="searchDTO.page"
      :page-attribute="{
        size: 'small',
        pageSizes: [10, 20, 50, 100],
        layout: ' total, sizes, prev, pager, next, jumper',
      }"
      @search="getList"
      @update="update"
      @remove="remove"
      @apply="apply"
    />
  </div>
</template>

<script setup lang="ts">
//----------------------------------导入区---------------------------------
import { onMounted, reactive, ref } from 'vue'
import type { ResultPageType } from '@/resources/interface/ResultTypes'
import CommonPageTable from '@/components/CommonPageTable.vue'
import { TableEnum } from '@/enums/TableEnum'
import CommonDialogForm from '@/components/CommonDialogForm.vue'
import ObjectUtils from '@/utils/ObjectUtils'
import { ProjectApi } from '@/apis/api/project/ProjectApi'
import { ProjectParams } from '@/resources/parameters/project/ProjectParameters'
import type {
  ProjectAddDTOType,
  ProjectSearchDTOType,
  ProjectSearchVOType,
  ProjectUpdateDTOType,
} from '@/resources/interface/project/ProjectTypes.ts'
import { ProjectRules } from '@/resources/rules/project/ProjectRules'
import ElementUtil from '@/utils/ElementUtil'
import { RoleUtils } from '@/utils/RoleUtils.ts'
import { Discount, User } from '@element-plus/icons-vue'
import { ProjectApplicationApi } from '@/apis/api/projectApplication/ProjectApplicationApi.ts'
import { useUserStore } from '@/stores/counter.ts'

//----------------------------------数据区---------------------------------
const loading = ref(false)
const dialogAdd = ref(false)
const dialogUpdate = ref(false)
const dialogApply = ref(false)
const searchDTO = reactive<ProjectSearchDTOType>({ ...ProjectParams.searchDTO })
const searchVO = ref<ResultPageType>()
let addDTO = reactive<ProjectAddDTOType>({ ...ProjectParams.addDTO })
let updateDTO = reactive<ProjectUpdateDTOType>({ ...ProjectParams.updateDTO })
let projectVO = ref()
const userStore = useUserStore()
// ----------------------------------方法区--------------------------------

const apply = async (row: ProjectSearchVOType) => {
  if (row.maxCapacity - row.currentSelected <= 0) {
    await ElementUtil.openBox({ content: '当前题目人数已满！', type: 'error' })
    return
  }
  projectVO.value = row
  dialogApply.value = true
}
const onApply = async () => {
  if (await ElementUtil.openBox({ content: '是否申请,申请后不可取消！', type: 'warning' })) {
    await ProjectApplicationApi.apply(projectVO.value.id, userStore.getUser().id)
  }
  await getList()
  dialogApply.value = false
}

/**
 * 添加 题目表 前置
 */
const add = async () => {
  dialogAdd.value = true
}
/**
 * 添加 题目表 回调
 * @param params 表单数据
 */
const onAdd = async (params: ProjectAddDTOType) => {
  await ProjectApi.add(params)
  loading.value = false
  await getList()
  ObjectUtils.resetObject(addDTO, ProjectParams.addDTO)
}
/**
 * 更新 题目表 前置
 * @param vo 选中数据
 */
const update = (vo: ProjectSearchVOType) => {
  updateDTO = reactive(ObjectUtils.copy(vo, updateDTO))
  dialogUpdate.value = true
}
/**
 * 更新 题目表 回调
 * @param params 表单数据
 */
const onUpdate = async (params: ProjectUpdateDTOType) => {
  await ProjectApi.update(params)
  await getList()
}
/**
 * 删除 题目表
 * @param vo 选中数据
 */
const remove = async (vo: ProjectSearchVOType) => {
  if (
    await ElementUtil.openBox({
      content:
        '删除题目同时将会删除相对应的：教师关系选题申请、开题报告、中期答辩、终期答辩、毕业材料；请确认是否删除！',
      type: 'warning',
    })
  ) {
    await ProjectApi.delete(Array.of(vo.id))
    await getList()
  }
}
/**
 * 获取 题目表 列表
 */
const getList = async () => {
  loading.value = true
  const result = await ProjectApi.search(searchDTO)
  searchVO.value = result.data
  loading.value = false
}

onMounted(() => {
  getList()
})
</script>

<style scoped></style>
